<template>
  <div class="main">
    <el-container class="main-content">
      <el-aside :width="isCollapse ? '60px' : '210px'">
        <NavMenu :isCollapse="isCollapse" />
      </el-aside>
      <el-container class="page">
        <el-header class="page-header">
          <NavHeader @fold-change="handleFoldCjamge" />
        </el-header>
        <el-main class="page-content">
          <div ref="elementSelector" class="boxBrgr"></div>
          <div class="page-info"><router-view></router-view></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
import NavMenu from '@/components/nav-menu/src/nav-menu.vue'
import NavHeader from '@/components/nav-header'

import * as THREE from 'three'
import Net from 'vanta/src/vanta.net'
export default defineComponent({
  components: {
    NavMenu,
    NavHeader
  },
  // mounted() {
  // this.vantaEffect = Net({
  //   el: this.$refs.elementSelector,
  //   THREE: THREE,
  //   color: 0x7888,
  //   mouseControls: true,
  //   touchControls: true,
  //   gyroControls: false,
  //   minWidth: 200.0,
  //   minHeight: 200.0,
  //   scale: 1.0,
  //   scaleMobile: 1.0,
  //   points: 13.0,
  //   maxDistance: 35.0,
  //   spacing: 20.0
  // })
  //   VANTA.NET({
  //     el: this.$refs.elementSelector,
  //     mouseControls: true,
  //     touchControls: true,
  //     gyroControls: false,
  //     minWidth: 200.0,
  //     minHeight: 200.0,
  //     scale: 1.0,
  //     scaleMobile: 1.0,
  //     color: 0x7888,
  //     points: 13.0,
  //     maxDistance: 35.0,
  //     spacing: 20.0
  //   })
  // },
  // beforeUnmount() {
  //   if (this.vantaEffect) {
  //     this.vantaEffect.destroy()
  //   }
  // },
  setup() {
    //使用ref引用挂载区域
    const elementSelector = ref(null)
    //创建一个全局的变量来使用vanta.js
    /**
     *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
     *但是vue3 setup中是没有this，所以要另外创建一个
     **/
    let vantaEffect = null
    //在两个生命周期钩子内创建vantaEffect
    onMounted(() => {
      vantaEffect = Net({
        el: elementSelector.value,
        THREE: THREE,
        //如果需要改变样式，要写在这里
        //因为这里vantaEffect是没有setOptions这个方法的
        color: 0x7888,
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minWidth: 200.0,
        minHeight: 200.0,
        scale: 1.0,
        scaleMobile: 1.0,
        points: 13.0,
        maxDistance: 50.0,
        spacing: 25.0
      })
    })

    onBeforeUnmount(() => {
      if (vantaEffect) {
        vantaEffect.destroy()
      }
    })

    const isCollapse = ref(false)
    const handleFoldCjamge = (isFold) => {
      isCollapse.value = isFold
    }

    return { handleFoldCjamge, isCollapse, elementSelector, vantaEffect }
  }
})
</script>

<style scoped lang="less">
/deep/.vanta-canvas {
  // height: 100vh !important;
}
.main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-content,
.page {
  height: 100%;
}

.page-content {
  color: #000;
  height: calc(100% - 48px);
  position: relative;
  display: table-cell;
  word-wrap: break-word;
  .page-info {
    position: absolute;
    width: 100%;
    border-radius: 5px;
  }
}
.boxBrgr {
  position: fixed;
  top: 48px;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.el-header,
.el-footer {
  display: flex;
  color: #333;
  text-align: center;
  align-items: center;
}

.el-header {
  height: 48px !important;
  padding: 0;
  background: linear-gradient(217deg, #95d5b2, #a8dadc, #457b9d, #1d3557, #e63946);
}

.el-aside {
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 200px;
  text-align: left;
  cursor: pointer;
  background-color: #001529;
  transition: width 0.3s linear;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */

  &::-webkit-scrollbar {
    display: none;
  }
}

.el-main {
  padding: 0;
  color: #333;
  text-align: center;
  background-color: #f0f2f5;
}
</style>
